<template>
  <!-- 尝试使用一些 -->
  {{ num }}
  <div class="draggable">
    <div draggable="true">sdasda</div>
    <el-button draggable="true" @click="change">改变</el-button>
    <el-button draggable="true" @click="change1">改变</el-button>
    <el-button draggable="true" @click="change2">改变</el-button>
  </div>
</template>


<script setup lang="ts">
import { onMounted, ref, toRefs, watch, computed, watchEffect } from "vue";
import {
  throttleFilter,
  debounceFilter,
  useMouse,
  useStorage,
  useRefHistory,
  useActiveElement,
  useDocumentVisibility,
} from "@vueuse/core";
import { useGlobalState } from "../../GolabState/index.ts";
const { x, y } = useMouse({ eventFilter: debounceFilter(100) });
// const b = useStorage("named", { name: "zs" }, sessionStorage);
const c = ref({
  name: "ssad",
});
const { doubleCount, increment, clear } = useGlobalState();

let com = computed(
  {
    get() {
      return c.value.name;
    },
    set(value) {
      console.log("get", value);
    },
  },
  {
    onTrack() {
      console.log(1);
    },
    onTrigger() {
      console.log(2);
    },
  }
);
console.log("9999", (com.value = "ssds"));

const num = ref(0);
const { history, redo, undo } = useRefHistory(num);
// increment();
// 返回的值是响应式的
const q = useStorage("name", c.value, localStorage);

const change = () => {
  num.value++;
  increment({ name: "ssd" });
};
const change1 = () => {
  undo();
  console.log(num.value);
};
const change2 = () => {
  redo();
  console.log(num.value);
};

onMounted(() => {
  const el = document.querySelector(".draggable");
  el?.addEventListener("dragstart", (e) => {
    // console.log(e);
    e.dataTransfer.effectAllowed = "move";
    console.log(e);
  });
  el?.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  el?.addEventListener("dragenter", (e) => {
    console.log(e);
  });
  el?.addEventListener("drop", (e) => {
    console.log(1, e);
  });
});

// 拿到鼠标所点击的dom元素
const activeElement = useActiveElement();
const ax = ref(0);
watch(activeElement, (el) => {
  console.log("focus changed to", el);
  ax.value = ax.value + 1;
});

watchEffect(() => {
  console.log("watch", com.value, ax.value);
});

const visibility = useDocumentVisibility();
</script>